<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>教程文档</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/editormd.preview.min.css"/>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/marked.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/prettify.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/editormd.js"></script>
		<style type="text/css">
			*{
				margin: 0;padding: 0;box-sizing: border-box;
			}
			#toTop{
				position: fixed;
				border-radius: 50%;
				color: white;
				font-size: 30px;
				width: 50px;
				height: 50px;
				right: 30px;
				bottom: 30px;
				line-height: 50px;
				text-align: center;
				background-color: #000000;
				opacity: 0.8;
				margin-right: -100px;
			}
		</style>
	</head>
	<body>
		<!-- 文章主体 -->
		<div id="md"></div>
		<div id="toTop">↑</div>
	</body>
</html>

<script type="text/javascript">
	$(function(){
		var text = window.android.loadDoc()
		editormd.markdownToHTML('md',{
			markdown: text,
			htmlDecode: 'script',
            emoji: true,
			taskList: true
		})
		window.android.loadComplete()
		var isShow = false
		$(document).scroll(function(){
			var h = $(document).scrollTop()
			if(h > 200){
				if(!isShow){
					$("#toTop").animate({"margin-right": "0px"})
				}
				isShow = true
			}else{
				if(isShow){
					$("#toTop").animate({"margin-right": "-100px"})
				}
				isShow = false
			}
		})
		$('#toTop').click(function(){
			window.scrollTo({
				top: 0,
				behavior: 'smooth'
			})
		})
	})
</script>
